<ui:composition xmlns="http://www.w3.org/1999/xhtml"
                xmlns:f="http://xmlns.jcp.org/jsf/core"
                xmlns:h="http://xmlns.jcp.org/jsf/html"
                xmlns:ui="http://xmlns.jcp.org/jsf/facelets"
                xmlns:p="http://primefaces.org/ui">
    <div class="topbar clearfix">
        <div class="topbar-left">
            <div class="logo"/>
        </div>

        <div class="topbar-right">
            <a id="menu-button" href="#">
                <i/>
            </a>

            <a id="topbar-menu-button" href="#">
                <i class="material-icons">menu</i>
            </a>
            <ul class="topbar-items fadeInDown animated">
                <h:panelGroup rendered="#{(guestPreferences.menuMode eq 'horizontal') or (guestPreferences.profile eq 'top')}">
                    <li class="profile-item">
                        <a href="#">
                            <div class="profile-image"/>
                            <span class="topbar-item-name">Jane Williams</span>
                        </a>

                        <ul class="ultima-menu animated">
                            <li role="menuitem">
                                <a href="#">
                                    <i class="material-icons">person</i>
                                    <span>Profile</span>
                                </a>
                            </li>
                            <li role="menuitem">
                                <a href="#">
                                    <i class="material-icons">security</i>
                                    <span>Privacy</span>
                                </a>
                            </li>
                            <li role="menuitem">
                                <a href="#">
                                    <i class="material-icons">settings_applications</i>
                                    <span>Settings</span>
                                </a>
                            </li>
                            <li role="menuitem">
                                <a href="#">
                                    <i class="material-icons">power_settings_new</i>
                                    <span>Logout</span>
                                </a>
                            </li>
                        </ul>
                    </li>
                </h:panelGroup>

                <li>
                    <a href="#">
                        <i class="topbar-icon material-icons">settings</i>
                        <span class="topbar-item-name">Settings</span>
                    </a>
                    <ul class="ultima-menu animated">
                        <li role="menuitem">
                            <a href="#">
                                <i class="material-icons"></i>
                                <span>Change Theme</span>
                            </a>
                        </li>
                        <li role="menuitem">
                            <a href="#">
                                <i class="material-icons"></i>
                                <span>Favorites</span>
                            </a>
                        </li>
                        <li role="menuitem">
                            <a href="#">
                                <i class="material-icons"></i>
                                <span>Lock Screen</span>
                            </a>
                        </li>
                        <li role="menuitem">
                            <a href="#">
                                <i class="material-icons"></i>
                                <span>Wallpaper</span>
                            </a>
                        </li>
                    </ul>
                </li>
                <li>
                    <a href="#">
                        <i class="topbar-icon material-icons animated swing">message</i>
                        <span class="topbar-badge animated rubberBand">5</span>
                        <span class="topbar-item-name">Messages</span>
                    </a>
                    <ul class="ultima-menu animated">
                        <li role="menuitem">
                            <a href="#" class="topbar-message">
                                <p:graphicImage value="#{resource['ultima-layout:images/avatar1.png']}" width="35"/>
                                <span>Give me a call</span>
                            </a>
                        </li>
                        <li role="menuitem">
                            <a href="#" class="topbar-message">
                                <p:graphicImage value="#{resource['ultima-layout:images/avatar2.png']}" width="35"/>
                                <span>Sales reports attached</span>
                            </a>
                        </li>
                        <li role="menuitem">
                            <a href="#" class="topbar-message">
                                <p:graphicImage value="#{resource['ultima-layout:images/avatar3.png']}" width="35"/>
                                <span>About your invoice</span>
                            </a>
                        </li>
                        <li role="menuitem">
                            <a href="#" class="topbar-message">
                                <p:graphicImage value="#{resource['ultima-layout:images/avatar2.png']}" width="35"/>
                                <span>Meeting today at 10pm</span>
                            </a>
                        </li>
                        <li role="menuitem">
                            <a href="#" class="topbar-message">
                                <p:graphicImage value="#{resource['ultima-layout:images/avatar4.png']}" width="35"/>
                                <span>Out of office</span>
                            </a>
                        </li>
                    </ul>
                </li>
                <li>
                    <a href="#">
                        <i class="topbar-icon material-icons">timer</i>
                        <span class="topbar-badge animated rubberBand">4</span>
                        <span class="topbar-item-name">Notifications</span>
                    </a>
                    <ul class="ultima-menu animated">
                        <li role="menuitem">
                            <a href="#">
                                <i class="material-icons"></i>
                                <span>Pending tasks</span>
                            </a>
                        </li>
                        <li role="menuitem">
                            <a href="#">
                                <i class="material-icons"></i>
                                <span>Meeting today at 3pm</span>
                            </a>
                        </li>
                        <li role="menuitem">
                            <a href="#">
                                <i class="material-icons"></i>
                                <span>Download documents</span>
                            </a>
                        </li>
                        <li role="menuitem">
                            <a href="#">
                                <i class="material-icons"></i>
                                <span>Book flight</span>
                            </a>
                        </li>
                    </ul>
                </li>
                <li class="search-item">
                    <h:panelGroup styleClass="md-inputfield">
                        <p:inputText id="search"/>
                        <p:outputLabel for="search" value="Search" />
                        <i class="topbar-icon material-icons">search</i>
                    </h:panelGroup>
                </li>
            </ul>
        </div>
    </div>
</ui:composition>